<template>
    <div>
        <!-- 轮播图区域 -->
        <!-- 因为Swiper有props，所以得传值 -->
        <swiper :lunbotu="lunbotu" :imgname="'img'" :isfull="true"></swiper>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/idssp/news">
		        <img src="../../assets/img/menu/news.png">
		        <div class="mui-media-body">新闻资讯</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/idssp/photos">
		        <img src="../../assets/img/menu/photo.png">
		        <div class="mui-media-body">图片分享</div></router-link></li>
		    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link  to="/idssp/shops">
		        <img src="../../assets/img/menu/shop.png">
		        <div class="mui-media-body">商品购买</div></router-link></li>
		</ul>
    </div>
</template>

<script>
import swiper from '../sub-components/Swiper.vue'
export default {
    data(){
        return{
            lunbotu:[]//轮播图数组
        }
    },
    created() {
        this.getlunbotu();
    },
    methods:{
        // async getlunbotu(){//获取轮播图
        //   const {data} = await this.$http.get('/api/getlunbo');
        //   if(data.status===0)this.lunbotu=data.message;
        // },
        getlunbotu(){
            this.lunbotu=[]
            this.$http.get("/getLunbo").then((res) => {
                if(res.data.errcode === 200){
                    let data = res.data.message;
                    data.forEach(item => {
                        this.lunbotu.push(item.img)
                    });
                }else{
                    this.lunbotu = [];
                }
            });
        }
    },
    components:{
        swiper
    }
}
</script>

<style lang="scss" scoped>
.mui-grid-view{
    li{
        img{//因为图片太大，一般图标尺寸都为原来的一般
            width: 60px;
            height: 60px;
        }
    }
}
.mui-grid-view.mui-grid-9{
    background-color: #fff;
    border: none;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:none
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
    font-size: 12px;
}
</style>